import { message } from 'antd';
import React, { useEffect } from 'react';

type BaiduProps = {}

export const Baidu = (props: BaiduProps) => {
  useEffect(() => {
    // var map = new window.BMapGL.Map("container");
    // map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 11);

    // var p1 = new window.BMapGL.Point(116.301934,39.977552);
    // var p2 = new window.BMapGL.Point(116.508328,39.919141);

    // var driving = new window.BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
    // driving.search(p1, p2);

    var map = new window.BMapGL.Map("container");
    map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 12);
    var output = "从西单到上地驾车需要";
    var searchComplete = function (results: any){
        if (transit.getStatus() != window.BMAP_STATUS_SUCCESS){
            return ;
        }
        var plan = results.getPlan(0);
        output += plan.getDuration(true) + "\n";                //获取时间
        output += "总路程为：" ;
        output += plan.getDistance(true) + "\n";             //获取距离
    }
    var transit = new window.BMapGL.DrivingRoute(map, {renderOptions: {map: map},
        onSearchComplete: searchComplete,
        onPolylinesSet: function(){        
            setTimeout(function(){message.success(output)}, 1000);
    }});
    var start=new window.BMapGL.Point(116.404844,39.911836);
    var end=new window.BMapGL.Point(116.308102,40.056057)
    transit.search(start, end);
  }, [])
  return (
    <>
      <h1>百度地图</h1>
      <div id="container"></div>
    </>
  );
}